<template>
	<view class="content">
		<!-- 取袋地址 -->
		<uni-card>
			<view class="card">
				<text class="black-color big bold">取袋地址</text>
				<text class="middle black-color">{{storeInfo.address}}</text>
			</view>
		</uni-card>
		<!-- 取袋时间 -->
		<uni-card>
			<view class="card">
				<text class="black-color big bold">取袋时间</text>
				<text class="middle black-color">{{goodInfo.start_time}}-{{goodInfo.end_time}}</text>
			</view>
		</uni-card>
		<!-- 商品详情 -->
		<uni-card>
			<view>
				<view>
					<text class="black-color big bold">商品详情</text>
				</view>
				<view>
					<u-line color="#dfdfdf" margin="20rpx 0rpx"></u-line>
				</view>
				<view class="item">
					<!-- 商品图片 -->
					<view class="card-pic">
						<image class="card-image" :src="goodInfo.logo"></image>
					</view>
					<!-- 商品名称、价格 -->
					<view class="card-content">
						<view>
							<text class="black-color big">{{goodInfo.name}}</text>
							<view>
								<text class="black-color middle">￥{{goodInfo.price}}</text>
							</view>
						</view>
					</view>
					<view class="num black-color big">
						<u-button :class="min_disable == true ? 'num-btn-disable' : 'num-btn'" @click="minus"
							:disabled="min_disable">
							<u-icon name="minus" size="10" color="black"></u-icon>
						</u-button>
						<text class="num-text">{{buy_num}}</text>
						<u-button :class="plus_disable == true ? 'num-btn-disable' : 'num-btn'" @click="plus"
							:disabled="plus_disable">
							<u-icon name="plus" size="10" color="black"></u-icon>
						</u-button>
					</view>
				</view>
			</view>
		</uni-card>
		<!--底部结算栏 -->
		<view class="pay uni-shadow-base">
			<view class="pay-text">
				<text class="middle">合计 ￥</text>
				<text class="big">{{buy_num*goodInfo.price}}</text>
			</view>
			<u-button class="pay-btn middle black-color" @click="payClick">立即支付</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeInfo: '',
				goodInfo: '',
				buy_num: 1,
				min_disable: true,
				plus_disable: false,
				order_id: '',
				bag_num: '',
			}
		},
		onLoad(option) {
			uniCloud.callFunction({
					name: 'getStore',
					data: {
						'_id': option.store_id,
					}
				})
				.then(res => {
					this.storeInfo = res.result.data[0];
				})
				.catch(error => {
					console.log(error);
				});
			uniCloud.callFunction({
					name: 'getGood',
					data: {
						'_id': option.good_id,
					}
				})
				.then(res => {
					this.goodInfo = res.result.data[0];
				})
				.catch(error => {
					console.log(error);
				});
		},
		methods: {
			minus() {
				this.buy_num > 1 ? this.buy_num-- : this.buy_num;
				if (this.buy_num == 1) {
					this.min_disable = true;
				}
				if (this.buy_num < this.goodInfo.all_num - this.goodInfo.day_sale) {
					this.plus_disable = false;
				}
			},
			plus() {
				this.buy_num < this.goodInfo.all_num - this.goodInfo.day_sale ? this.buy_num++ : this.buy_num;
				if (this.buy_num == this.goodInfo.all_num - this.goodInfo.day_sale) {
					this.plus_disable = true;
				}
				if (this.buy_num > 1) {
					this.min_disable = false;
				}
			},
			payClick() {
				//获取当天该店铺订单数量
				uniCloud.callFunction({
						name: 'getOrderNum',
						data: {
							"store_id": this.storeInfo._id
						}
					})
					.then(res => {
						let n = res.result.total + 1;  //订单号=订单数量+1
						if(n<10){ this.bag_num = '00'+n; }
						if(n>9 && n<100){ this.bag_num = '0'+n; }
						//提交订单
						uniCloud.callFunction({
								name: 'addOrder',
								data: {
									'user_id': uni.getStorageSync('userId'),
									'store_id': this.storeInfo._id,
									'good_id': this.goodInfo._id,
									'user_name': uni.getStorageSync('userName'),
									'store_name': this.storeInfo.name,
									'good_name': this.goodInfo.name,
									'user_logo': '/static/img/user_logo.jpg',
									'store_logo': this.storeInfo.logo,
									'good_logo': this.goodInfo.logo,
									'price': this.goodInfo.price,
									'buy_num': this.buy_num,
									'sum_price': this.goodInfo.price*this.buy_num,
									'buy_time': new Date().getTime(),
									'status': "进行中",
									'bag_num': this.bag_num,
									'start_time': this.goodInfo.start_time,
									'end_time': this.goodInfo.end_time,
									'score':0,
								}
							})
							.then(res => {
								console.log(res);
								if(res.result.id){
									uni.showToast({
										title: '支付成功，正在跳转...',
										icon: 'none'
									});
									setTimeout(function(){
										uni.switchTab({
											url:"../order/order"
										})
									},2500);
								}
								
							})
							.catch(error => {
								console.log(error);
							});
					})
					.catch(error => {
						console.log(error);
					});



			}
		}
	}
</script>

<style>
	.small {
		font-size: 20rpx;
	}

	.middle {
		font-size: 25rpx;
	}

	.big {
		font-size: 30rpx;
	}

	.bold {
		font-weight: bold;
	}

	.green-color {
		color: #296844;
	}

	.black-color {
		color: black;
	}

	.red-color {
		color: brown;
	}

	.content {
		padding-top: 10rpx;
	}

	.card {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.card-pic {
		flex: 2;
	}

	.card-image {
		display: block;
		margin: 0 auto;
		width: 60px;
		height: 60px;
		border-radius: 5px;
	}

	.card-content {
		flex: 6;
		margin-left: 20rpx;
	}

	.num {
		flex: 2;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.num-btn {
		height: 50rpx;
		width: 50rpx;
		border-radius: 20%;
		border: 1px solid #296844;
		background-color: rgba(123, 197, 111, 0.7);
	}

	.num-btn-disable {
		height: 50rpx;
		width: 50rpx;
		border-radius: 20%;
		border: 1px solid #adadad;
		background-color: rgba(183, 183, 183, 0.4);
	}

	.num-text {
		margin: 0 30rpx;
	}

	.pay {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 40rpx;
		margin: 40rpx 40rpx;
		background-color: #ffffff;
	}

	.pay-text {
		flex: 7;
		margin-left: 40rpx;
	}

	.pay-btn {
		flex: 3;
		border-radius: 40rpx;
		border: 1px solid #296844;
		background-color: rgba(123, 197, 111, 0.7);
	}
</style>